<template>
  <el-card shadow="nerver" class="h-full">
    <flex-container size="10px">
      <p slot="header">
        <!-- :disabled="flag" -->
        <el-button type="primary" :disabled="flag" @click="formEvent('add')"
          >添加</el-button
        >
        <el-button
          :disabled="changeFlag"
          type="primary"
          @click="formEvent('edit')"
          >编辑</el-button
        >
        <el-button
          :disabled="changeFlag"
          type="danger"
          @click="formEvent('del')"
          >删除</el-button
        >
      </p>

      <ul class="h-full ul-for scrollbar-container">
        <li
          :class="{ 'is-active': item.id == isActive }"
          @click="handlerChange(item)"
          v-for="item in areasList"
          :key="item.id"
        >
          {{ item.extName }}
        </li>
      </ul>
    </flex-container>
  </el-card>
</template>

<script>
export default {
  props: {
    areasList: {
      type: Array,
      default: []
    },
    level: {
      type: Number,
      default: 1
    },
    pid: {
      type: Object,
      default: () => undefined
    }
  },
  emits: ["change", "formChaneg"],
  computed: {
    flag() {
      if (this.level == 1) {
        return false;
      }
      return !this.pid;
    },
    changeFlag() {
      return !this.isActive;
    }
  },
  watch: {
    areasList(nval, oval) {
      // this.isActive = "";
    },
    pid() {
      this.isActive = "";
    }
  },
  data() {
    return {
      isActive: ""
    };
  },
  methods: {
    handlerChange(item) {
      if (item.id == this.isActive) return;
      this.isActive = item.id;
      this.$emit("change", {
        type: this.level,
        isActive: item
      });
    },
    formEvent(t) {
      const fd = {
        type: this.level,
        isActive: this.areasList.find(i => i.id == this.isActive),
        formType: t
      };
      this.$emit("formChaneg", fd);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  :deep(.el-card__body) {
    height: 100%;
  }
}

ul.ul-for {
  overflow-y: auto;
  li {
    padding: 8px 10px;
    text-align: center;
    cursor: pointer;

    &:not(:nth-last-child(1)) {
      border-bottom: 1px solid transparent;
      margin-bottom: 10px;
      position: relative;
      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #e2e2e2;
        bottom: -5px;
        left: 0;
      }
    }
    &.is-active {
      border: 1px solid var(--color-primary);
      background-color: var(--color-primary-bg);
      color: var(--color-primary);
      border-radius: 3px;
    }
  }
}
</style>
